<template>
    <div>
        <div class="tit">疫情防控</div>
        <van-row>
            <van-tag type="primary">注意佩戴口罩</van-tag>
        </van-row>
        <van-cell-group>
            <van-cell icon="https://img.yzcdn.cn/vant/user-active.png" title="用户名">{{username}}</van-cell>
        </van-cell-group>
        <van-cell is-link @click="showPopup">健康状态</van-cell>
        <van-cell is-link @click="pass">确认通过</van-cell>
        <van-cell is-link @click="updatePassword">修改密码</van-cell>
        <van-cell is-link @click="exit">切换用户</van-cell>
        <van-popup v-model="show"><div class="container"><div class="health">
          <div class="test">健康</div>
        </div></div></van-popup>
    </div>
</template>

<script>
    import * as Dialog from "vant";
    export default {
        data() {
            return {
                show: false,
                username: this.$route.query.username,
            };
        },
        methods: {
            pass(){
                let record = {
                    direction: window.sessionStorage.getItem("direction"),
                    personId: this.username,
                    areaId: window.sessionStorage.getItem("areaId")
                }
                this.$http.login.pass(record).then((res) => {
                    this.$router.push({path:'/message',query: {username:this.username,message:res.data}})
                })
            },
            exit(){
                let time = new Date();
                time.setTime(time.getTime()- 1);
                window.document.cookie = `userName=${window.btoa(null)}; path=/; expires=${time.toGMTString()}`;
                window.document.cookie = `passWord=${window.btoa(null)}; path=/; expires=${time.toGMTString()}`
                this.$router.push({path:'/login'})
            },
            updatePassword(){
                this.$router.push({path:'/change',query: {username:this.username}})
            },
            showPopup() {
                this.show = true;
            }
        },
    };
</script>
<style>
    .tit {
        height: 20px;
        background-color: #42b983;
        color: aliceblue;
        text-align: center;
    }
  .container{
    width: 300px;
    height: 100px;
    background-color: #42b983;
  }
  .health{
    width: 100px;
    height: 30px;
    background-color: aliceblue;
    position: relative;
    top: 28px;
    left: 100px;
  }
  .test{
    text-align: center;
    color: #42b983;
    position: relative;
    top: 5px;
  }
</style>
